<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-header height="20px">
          <el-text class="mx-1" size="large">样本位点具体情况</el-text>
        </el-header>
        <el-main>
          <el-select class="echarts_select" v-model="value" placeholder="样本">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
              @click="selectOption(item)" />
          </el-select>
          <div class="charts" id="main_charts"></div>
        </el-main>
      </el-container>
      <el-aside width="325px">
        <el-container>
          <el-header height="20px">
            <el-text class="mx-1">样本位点序列情况</el-text>
          </el-header>
          <el-main>
            <div>
              <el-table class="table_data" border :data="tableData" height="485" style="">
                <el-table-column prop="position" label="位点" />
                <el-table-column prop="mutation" label="样本序列" />
                <el-table-column prop="standardNucleotide" label="标准序列" />
              </el-table>
            </div>
            <div class="footer_data" style="">
              共&nbsp;{{ items }}&nbsp;项
            </div>
          </el-main>
        </el-container>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
// eventBus 用来在兄弟之间传值，但因组件生命周期原因，暂时弃用
import eventBus from "../../assets/eventBus";
export default {
  name: "chart",
  data() {
    return {
      // echarts图dom元素
      myChart: null,
      // 模拟数据
      mock_data:
        "73A:G:29,2;194C:A:1,0;248A:G:1,0;436C:T:6,4;437C:T:6,4;489T:C:2,0;511C:T:1,0;8020G:A:1,0;16129G:A:1024,17;16223C:T:21,2;16257C:T:22,3;16311T:C:979,34;16362T:C:984,3;16519T:C:977,16;",
      // 表格数据
      tableData: [],
      // 图表数据
      chartData: [],
      // 模拟数据数组
      options: [
        {
          name: '样本1',
          label: '样本1',
          value: '73A:G:29,2;194C:A:1,0;248A:G:1,0;436C:T:6,4;437C:T:6,4;489T:C:2,0;511C:T:1,0;8020G:A:1,0;16129G:A:1024,17;16223C:T:21,2;16257C:T:22,3;16311T:C:979,34;16362T:C:984,3;16519T:C:977,16;',
        },
        {
          name: '样本2',
          label: '样本2',
          value: '72A:G:29,2;194C:A:1,0;248A:G:1,0;436C:T:6,4;437C:T:6,4;489T:C:2,0;511C:T:1,0;8020G:A:1,0;16129G:A:1024,17;16223C:T:21,2;16257C:T:22,3;16311T:C:979,34;16362T:C:984,3;16519T:C:977,16;',
        },
        {
          name: '样本3',
          label: '样本3',
          value: '71A:G:29,2;194C:A:1,0;248A:G:1,0;436C:T:6,4;437C:T:6,4;489T:C:2,0;511C:T:1,0;8020G:A:1,0;16129G:A:1024,17;16223C:T:21,2;16257C:T:22,3;16311T:C:979,34;16362T:C:984,3;16519T:C:977,16;',
        },
        {
          name: '样本4',
          label: '样本4',
          value: '194C:A:1,0;248A:G:1,0;436C:T:6,4;437C:T:6,4;489T:C:2,0;511C:T:1,0;8020G:A:1,0;16129G:A:1024,17;16223C:T:21,2;16257C:T:22,3;16311T:C:979,34;16362T:C:984,3;16519T:C:977,16;',
        },
        {
          name: '样本5',
          label: '样本5',
          value: '75A:G:29,2;194C:A:1,0;248A:G:1,0;436C:T:6,4;437C:T:6,4;489T:C:2,0;511C:T:1,0;8020G:A:1,0;16129G:A:1024,17;16223C:T:21,2;16257C:T:22,3;16311T:C:979,34;16362T:C:984,3;16519T:C:977,16;',
        },
      ],
      // 选择项
      value: '样本1',
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    // 初始化
    init() {
      this.tableData = this.disposeData(this.mock_data);
      this.chartData = this.dispose_mock_data(this.tableData);
      this.chartData = this.processData(this.chartData);
    },
    // 初始化echarts图
    initCharts() {
      this.myChart = echarts.init(document.getElementById("main_charts"));
      var option = {
        title: {
          text: "样本位点信息",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            stillShowZeroSum: false,
            label: {
              show: false,
              position: "center",
            },
            avoidLabelOverlap: false,
            labelLine: {
              show: false,
            },
            data: this.chartData,
            radius: ["40%", "70%"],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              label: {
                formatter: function (params) {
                  return params.data.id;
                },
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 处理原始数据为表格数据
    disposeData(mock_data) {
      let dataEntries = mock_data.split(";");
      const processedData = dataEntries
        .map((entry) => {
          if (entry) {
            const [positionMutation, standardNucleotide] = entry.split(":");
            const position = positionMutation.slice(0, -1);
            const mutation = positionMutation.slice(-1);
            const intValue = parseInt(position, 10);
            return {
              position: intValue,
              mutation: mutation,
              standardNucleotide: standardNucleotide,
            };
          }
          return null;
        })
        .filter(Boolean);
      return processedData;
    },
    // 处理模拟数据为初始图表数据
    dispose_mock_data(data) {
      let arr = data.map((value, index) => {
        if (index == 0) {
        }
        return {
          value: value.position,
          name: value.standardNucleotide,
          id: value.position + value.standardNucleotide,
        };
      });
      return arr;
    },
    // 处理初始图表数据为最终图表数据
    processData(data) {
      const result = [];
      result.push({ value: 1, name: "REF" });
      for (let i = 0; i < data.length; i++) {
        const diff = data[i]["value"] - result[result.length - 1]["value"];
        result.push({
          value: diff,
          name: "REF",
          itemStyle: { color: "#ebebeb" },
        });
        result.push(data[i]);
      }
      result.map((value, index) => {
        if (value.name != "REF") {
          value.value = 80.5;
        }
      });
      return result;
    },
    // 重置图表
    selectOption(item) {
      this.value = item.name;
      this.tableData = this.disposeData(item.value);
      this.chartData = this.dispose_mock_data(this.tableData);
      this.chartData = this.processData(this.chartData);
      this.myChart.setOption({
        series: [
          {
            data: this.chartData,
          }
        ]
      })
    },
  },
  computed: {
    items() {
      return this.tableData.length;
    },
  }
}
</script>

<style>
.common-layout {
  width: 100%;
  height: 100%;
}

.echarts_select {
  width: 200px;
}

.charts {
  width: 100%;
  height: 92.5%;
}

.table_data {
  width: 100%
}

.footer_data {
  margin: 2%;
  font-size: small
}
</style>
